🐦 Shima UI Attire 修正レポート（Single Column化 + 枠除去）
■ 発生していた問題
スマホ表示で「シマエナガ・コレクション」が2列風になり、
.shima-panels の width が約 172px に圧縮されていた
CSSをいくら変更してもレイアウトが変化しないケースがあった
修正版で Unexpected token '{' エラーが発生
→ builder_ui.section.attire.bundle.js の構文破損
デバッグ用のマゼンタ枠（outline）が本番UIに残っていた
■ 真の原因
① Shadow DOM の存在
.attire-v21-shima は host 要素であり、
内部が ShadowRoot で構成されていた。
そのため：
document.head にCSSを追加しても効かない
通常のセレクタ上書きでは影響しない
つまり「CSSが効かない」のではなく
“効く場所に刺さっていなかった”
② 2列化の直接原因
.shima-grouped-body が
CSS
コードをコピーする
display: grid;
grid-template-columns: 1fr 1fr;
になっていた。
その結果：
.shima-panels が約172pxに分割
スマホで縦並びにならない
■ 最終的な解決策（勝ち筋）
✔ ShadowRoot に直接CSSを注入
通常headではなく、
host.shadowRoot.appendChild(style) でスタイルを追加
✔ 2列化の根本を潰す
CSS
コードをコピーする
.shima-grouped-body {
  display: block !important;
  grid-template-columns: 1fr !important;
}

.shima-panels {
  width: 100% !important;
  max-width: none !important;
}
これにより
.shima-panels = w=350px
1列レイアウト復帰
✔ デバッグ枠の除去
原因：
CSS
コードをコピーする
outline: 4px solid #ff00ff;
をbundle内に直書きしていた。
対応：
該当行を削除
本番UIから完全除去
■ 今回の重要教訓
🔹 CSSが効かない場合
Shadow DOMか確認する
display:grid の有無を確認する
幅が半分になっていないか確認する
セレクタの階層を疑う
🔹 JSエラーが出た場合
Unexpected token '{' は
追記位置ミス
IIFEの外にコードを書いた
末尾のカンマや閉じ忘れ
の可能性が高い
■ 今回の最終安定状態
スマホで完全1列
ShadowRoot対応済み
DIAGは通常非表示
マゼンタ枠削除済み
無駄な文字化けフォルダ削除済み
■ 再発防止チェックリスト
□ Shadow DOMか？ □ grid指定は残っていないか？ □ 幅が172pxなど半分になっていないか？ □ bundle構文は壊れていないか？ □ debug用CSSは消したか？
これを「Shima UI 修正ログ_2026.txt」みたいな名前で保存しておけばいい。

■ 追記：v23チャイナ服特化コレクションで判明した「2列の真犯人」
今回のケースでは、attire 側だけが原因ではなかった。
真犯人は builder_main.html 側の共通UIルールで、
以下のような「開いた details の直下 div を自動grid化するCSS」が刺さっていた。

CSS
コードをコピーする
.section-content details[open] > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

その結果：
- v23専用の body（.attire-v23-body）も開いた瞬間にgrid化される
- スマホで1列化したつもりでも、共通CSSに再度2列へ戻される
- 「局所CSSを入れたのに2列のまま」という現象が起こる

■ この症状が出た時の判断
- attire 側のCSSだけ直しても2列のまま → 共通CSSを疑う
- 特に builder_main.html や core 相当の「開いた details 一括装飾」を確認する
- Shadow DOM問題とは別軸で、共通セレクタが勝っていないかを見る

■ v23での正しい勝ち筋
✔ v23専用セレクタで、共通gridを明示的に打ち消す
CSS
コードをコピーする
.attire-v23-container .attire-v23-body {
  display: block !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
}

.attire-v23-container details[open] > .attire-v23-body {
  display: block !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
}

.attire-v23-container .attire-v23-body > .attire-v23-node {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

■ 要点
- 「2列の原因」は子側のgridだけとは限らない
- 親・共通・core側が details[open] へ広域指定している場合がある
- 見た目修正では「局所CSS追加」だけでなく「共通CSSの打ち消し」が必要なことがある

■ 再発防止チェック追加
□ builder_main.html / core 側に details[open] > div の共通grid指定がないか？
□ 修正対象だけに限定した上書きになっているか？
□ 子棚だけでなく、開いた親body側にも display:block を当てたか？
□ Shadow DOM問題と共通CSS問題を分けて確認したか？

■ 追記：特化コレクション整理時の見た目ルール

今回、衣装カテゴリー上部の
- シマエナガ・コレクション
- 攻め・スペシャル
- チャイナ服特化コレクション
- アイドル衣装特化コレクション
を「特化コレクション群」として先頭へまとめた際、見た目の整理で有効だったルールを以下に記録する。

【基本方針】
特化コレクション群は、通常衣装棚と混ぜず、
「ひとまとまりの特別区画」として見せる。

【見た目ルール】
1. 特化コレクション群の上に、小さめのグループ見出しを1回だけ置く
   例：
   🧩 特化コレクション

2. チャイナ / アイドルの途中に中間見出しを増やしすぎない
   例：
   「🧩 特化コレクション（チャイナ / アイドル）」のような途中ラベルは、
   上側に全体見出しがあるなら不要。
   情報が二重になり、流れが濁る。

3. 特化コレクション群の最後（今回はアイドル衣装特化コレクションの下）に、
   通常衣装へ戻るための区切りを入れる
   例：
   細い線
   👗 通常衣装

4. この区切り線は、特化コレクションの「内側の最後の棚の中」ではなく、
   特化コレクション群の直後に来る sibling 要素として置く
   理由：
   コンテナ内部末尾に入れると、ただの余白や内部装飾に見えやすく、
   「通常棚との境界線」として機能しにくい。

5. 線の濃さより位置が重要
   線が見えない時は、色を濃くする前に
   「本当に特化群の直後、通常群の直前にあるか」を確認する。

【スマホ表示での優先順位】
- 特化コレクション群が先頭にまとまって見えること
- 通常衣装棚との切り替わりが一目で分かること
- 見出しは増やしすぎず、流れを邪魔しないこと

【今回の最終的な勝ち筋】
- 上に小さく「🧩 特化コレクション」
- その下に特化4棚を連続表示
- その下に「細い区切り線 + 👗 通常衣装」
- その下から通常棚開始

これが最も自然で、スマホでも見やすかった。

■ 追記：特化コレクションの名称変更で専用UI分岐を壊した件

今回、衣装カテゴリー整理の途中で
「🎤 アイドル衣装特化コレクション」
の見出しを

「🎤 アイドル衣装特化コレクション（深掘り）」

へ変更したところ、
UI上では内部の4親棚構造
- アイドル完成セット
- アイドルベース
- アイドルカスタマイズ
- アイドル設定
が消え、フラット表示に戻る現象が発生した。

【真の原因】
データが壊れたのではなく、
builder_ui.section.attire.bundle.js 側の
「特化コレクション専用の描画分岐」が
タイトル文字列の完全一致で判定されていたため。

つまり：
- データ自体は4親棚構造のまま存在していた
- しかしタイトルを変えたことで
  専用描画ロジックの条件から外れた
- その結果、通常の再帰描画へ落ちて
  フラット表示になった

【重要ルール】
1. 特化コレクション系のタイトル変更は、見た目だけの変更でも危険
   特に以下のような棚は、
   title の完全一致で専用UI分岐している可能性がある
   - シマエナガ・コレクション
   - チャイナ服特化コレクション
   - アイドル衣装特化コレクション
   - 攻め・スペシャル

2. タイトルを変更したい時は、
   先に bundle 内で
   - if (title === "...")
   - switch(title)
   - title.includes(...)
   などの分岐条件が無いか確認する

3. 役割説明を足したい時は、
   title 本体を変えるより
   - 小さな補助ラベル
   - 見出し下の説明文
   - セクション上部のガイド文
   で表現する方が安全

4. 「UIが急にフラット置きになった」時は、
   データ破損より先に
   “専用描画条件から外れていないか”
   を疑う

【今回の勝ち筋】
- タイトルを元の
  「🎤 アイドル衣装特化コレクション」
  に戻した
- その結果、専用描画分岐が復活し、
  4親棚構造も復帰した

【再発防止チェック追加】
□ 見出し変更前に title 完全一致条件を確認したか？
□ 特化コレクション系は title を直接いじらず補助ラベルで表現できないか？
□ フラット表示化した時、描画分岐条件から外れていないか確認したか？

■ 追記：整理作業中の「土台巻き戻り」防止ルール

今回、役割整理の修正を入れた際、
アイドル特化コレクション内部の4親棚構造が一時的に消えた。

【原因】
修正そのものではなく、
作業の土台に使ったzipが
「4親棚化より前の段階」の版だったため。

その結果：
- 表示名変更は反映された
- しかし内部構造は古い状態へ巻き戻った

【重要ルール】
1. 見た目修正・役割整理・名称整理を入れる時でも、
   必ず「直前の最新安定版」を土台にする

2. 特に特化コレクション系は、
   表示順・見出し・内部構造が複数段階で積み重なっているため、
   少し古いzipを土台にすると内部だけ巻き戻りやすい

3. 修正前に必ず確認する
   - そのzipは最新安定版か？
   - 直前に直した親棚構造が残っているか？
   - シークレット表示、特化表示、末尾固定などが反映済みか？

【今回の教訓】
「小さな文言調整」でも、
土台が古いと内部構造の巻き戻り事故が起きる。
名称修正と構造維持は別問題なので、
必ず最新安定版をベースに局所修正すること。